<template>
  <div>
    <div style="margin-top:45px;margin-bottom:45px;">
      <div v-for="(b,i) in bargains" :key="i">
        <div style="width: 100%;position:relative;height:100px;margin-bottom:5px;background:white;">
          <img
            style="width:100px;height:100px;position:absolute;left:0;top:0;"
            :src="b.product_picture_url"
          >
          <p style="position:absolute;left:100px;top:0;">【{{b.remark}}】{{b.title}}</p>
          <p style="position:absolute;left:110px;bottom:5px;color:red;">原价{{b.price/100}}元</p>
          <div
            @click="handleSubmit(b)"
            style="position: absolute;bottom: 5px;right: 10px;color:white;border-radius: 5px;background-color:red;text-align:center;width:100px;height:30px;line-height:30px;vertical-align:middle;font-size:14px;"
          >砍价{{b.target_price/100}}元拿</div>
        </div>
      </div>
      <div
        style="width: 100%;position: fixed;left:0;bottom:0;border-top:1px solid #ccc;line-height:40px;text-align:center;vertical-align:middle;background:#fff;"
      >
        <p style="width:48%;float:left;" @click="handleRecord">砍价记录</p>
        <p style="width:1px;height:20px;background:#ccc;float:left;margin-top:10px;"></p>
        <p style="width:48%;float:left;" @click="handleBargain">我的砍价</p>
      </div>

      <modal
        :hidden="add_hidden"
        title="新增收货地址"
        confirm-text="确认"
        cancel-text="取消"
        @cancel="add_hidden=true"
        @confirm="confirmAdd"
      >
        <van-cell-group>
          <van-field :value="name" placeholder="请输入收货人姓名" @change="changeName"/>
          <van-field :value="mobile" type="number" placeholder="请输入手机号码" @change="changeMobile"/>
          <picker mode="region" @change="bindRegionChange" :value="area">
            <van-field :value="region" disabled placeholder="请选择所在地区"/>
          </picker>
          <van-field
            :value="detail_address"
            type="textarea"
            placeholder="请输入街道、楼牌号等"
            @change="changeDetailAddress"
          />
        </van-cell-group>
      </modal>

      <modal
        :hidden="confirm_hidden"
        title="确认收货地址"
        confirm-text="确认"
        cancel-text="取消"
        @cancel="confirm_hidden=true"
        @confirm="submit"
      >
        <div>
          <p>
            姓名：
            <span v-text="name"></span>
          </p>
          <p>
            手机：
            <span v-text="mobile"></span>
          </p>
          <p>
            地址：
            <span v-text="detail_address"></span>
          </p>
        </div>
      </modal>

<div  v-if="show_list">
      <van-action-sheet :show="show_list" title="选择收货地址" @click="show_list=false">
        <div
          v-for="(v,i) in list"
          :key="i"
          style=" position: relative;padding:10px;border-bottom:1px solid #ccc;"
        >
          <div v-if="v.id>0" style="height:50px;" @click="listClick(v)">
            <div>{{v.name}},{{v.mobile}}</div>
            <div
              style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:80%;"
            >{{v.address}}</div>
            <div style="position: absolute;right: 0px;right:10px;top:35%;">
              <van-icon name="arrow" style="inline-block"/>
            </div>
          </div>
          <div v-else style="height:50px;vertical-align:middle;" @click="listClick(v)">
            <div style="line-height:50px;">新增收货地址</div>
            <div
              style="position: absolute;right: 0px;right:10px;   top:30%; text-align: center;vertical-align:middle;"
            >
              <van-icon name="arrow" style="inline-block"/>
            </div>
          </div>
        </div>
      </van-action-sheet>
</div>
    </div>
  </div>
</template>

<script>
import api from "@/utils/api";
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      show_list: false,
      // list_show: false,
      add_hidden: true,
      list_hidden: true,
      confirm_hidden: true,
      search: {
        page: 1,
        limit: 5
      },
      bargains: [],
      num: 0,
      form: {},
      list: [],
      address: {
        address: "",
        name: "",
        mobile: ""
      },
      bargain_id: 0,
      region: [],
      area: [],
      is_add: false,

      name: "",
      mobile: "",
      region: "",
      detail_address: "12352135"
    };
  },
  computed: {
    ...mapGetters(["login_info", "user"])
  },
  beforeMount() {
    this.search.brand_id = this.user.brand_id;
    this.form.user_id = this.user.id;
    this.fetchBargain();
    this.fetchAddress();
  },
  onPullDownRefresh() {
    // 下拉刷新
    this.search.page = 1;
    this.fetchBargain();
  },
  onReachBottom() {
    // 上拉加载
    this.search.page++;
    this.fetchBargain();
  },
  onUnload() {
    this.confirm_hidden = true;
    this.add_hidden = true;
    this.show_list = false;
  },
  methods: {
    changeName(e) {
      this.address.name = e.mp.detail;
    },
    changeMobile(e) {
      this.address.mobile = e.mp.detail;
    },
    changeDetailAddress(e) {
      this.address.detail_address = e.mp.detail;
    },
    listClick(row) {
      this.show_list = false;
      if (row.id < 1) {
        //新增
        (this.detail_address = ""), (this.name = ""), (this.mobile = "");
        this.area = [];
        this.region = "";
        this.add_hidden = false;
      } else {
        //支付
        this.name = row.name;
        this.mobile = row.mobile;
        this.detail_address = row.address;
        this.confirm_hidden = false;
        // this.submit();
      }
    },
    confirmAdd() {
      console.log("add_address", this.address);
      if (!this.address.name) {
        wx.showToast({ icon: "none", title: "收货人名字不能为空" });
        return;
      }
      if (!this.address.mobile) {
        wx.showToast({ icon: "none", title: "电话号码不能为空" });
        return;
      }
      if (this.area.length == 0) {
        wx.showToast({ icon: "none", title: "请选择所在地区" });
        return;
      }
      if (!this.address.detail_address) {
        wx.showToast({ icon: "none", title: "详细地址不能为空" });
        return;
      }
      if (!/^1[34578]\d{9}$/.test(this.address.mobile)) {
        wx.showToast({ icon: "none", title: "手机号码有误，请重填" });
        return;
      }
      this.address.brand_id = this.user.brand_id;
      this.address.user_id = this.user.id;
      this.address.area = this.area;
      this.address.address = this.region + this.address.detail_address;
      api.saveAddress(this.address);

      this.confirm_hidden = false;
      this.add_hidden = true;

      this.detail_address = this.region + this.address.detail_address;
      this.name = this.address.name;
      this.mobile = this.address.mobile;

      // this.address=JSON.parse(JSON.stringify(this.address))
    },
    cancelList() {
      this.list_hidden = true;
    },
    confirmList() {
      // aa
    },
    bindRegionChange(e) {
      console.log(e.mp.detail.value);
      this.area = e.mp.detail.value;
      this.region = this.area[0] + "" + this.area[1] + "" + this.area[2];
    },
    fetchAddress() {
      api
        .findAddress({ brand_id: this.user.brand_id, user_id: this.user.id })
        .then(result => {
          if (result.code == 0) {
            result.data.forEach(item => {
              let address = "";
              item.area.forEach(ar => {
                address = address + ar;
              });
              address = address + item.detail_address;
              item.address = address;
            });
            this.list = result.data;
            this.list.push({ id: 0 });
          }
        });
    },
    log(title, obj) {
      console.log("kanjia", title, obj);
    },
    handleRecord() {
      wx.navigateTo({ url: "kanjia_record?active=1" });
    },
    handleBargain() {
      wx.navigateTo({ url: "kanjia_record?active=0" });
    },
    submit() {
      let self = this;
      this.form.name = this.name;
      this.form.mobile = this.mobile;
      this.form.address = this.detail_address;
      this.form.bargain_id = this.bargain_id;
      api.submitBargain(this.form).then(res => {
        if (res.code == 0) {
          this.confirm_hidden = true;
          wx.navigateTo({ url: "kanjia_detail?order_id=" + res.data });
        }
      });
    },
    handleSubmit(row) {
      this.bargain_id = row.id;
      console.log("bargain_id", this.bargain_id);
      // this.list_hidden = false;
      this.show_list = true;
    },
    fetchBargain() {
      let self = this;
      api.findBargain(this.search).then(res => {
        wx.stopPullDownRefresh();
        console.log("kanjia findBargain", res.data.data);
        if (res.code == 0) {
          if (self.search.page == 1) {
            self.bargains = [];
          }

          res.data.data.forEach(v => {
            self.bargains.push(v);
          });
          let temp = self.bargains;
          self.bargains = JSON.parse(JSON.stringify(temp));
          self.log("bargains", self.bargains);
        }
      });
    }
  }
};
</script>

<style>
page {
  background: #fff;
}
.d_base {
  width: 100%;
  border: 2px solid red;
  height: 60px;
}
.div_left {
  width: 30%;
  border: solid 1px blue;
  float: left;
  height: 60px;
}
.div_rigth {
  width: 70%;
  border: solid 1px red;
  float: left;
  height: 60px;
}
.img {
  width: 60px;
  height: 60px;
}
.kanjia_btn {
  color: #fff;
  border-radius: 5px;
  width: 100px;
  height: 40px;
}
.price {
  float: left;
  padding-left: 10px;
  color: red;
  border-radius: 5px;
}
.title {
  position: absolute;
  left: 10px;
  top: 10px;
}

.my_model {
  height: 50%;
  width: 100%;
}

.d_add {
  position: relative;
  padding: 10px;
}

.d_add_title {
  position: relative;
  top: 0;
  text-align: center;
  vertical-align: middle;
}

.i_add {
  position: relative;
  right: 0;
}
</style>
